Positioning
Padding
.zero-padding
.zero-padding-x
.zero-padding-y
.zero-padding-top
.zero-padding-right
.zero-padding-left
.padding-xs .25em
.padding-sm .5em
.padding-md 1em
.padding-lg 1.5em
.padding-xl 3em
.padding-x-xs .25em
.padding-x-sm .5em
.padding-x-md 1em
.padding-x-lg 1.5em
.padding-x-xl 3em
.padding-y-xs .25em
.padding-y-sm .5em
.padding-y-md 1em
.padding-y-lg 1.5em
.padding-y-xl 3em
.padding-right-xs .25em
.padding-right-sm .5em
.padding-right-md 1em
.padding-right-lg 1.5em
.padding-right-xl 3em
.padding-bottom-xs .25em
.padding-bottom-sm .5em
.padding-bottom-md 1em
.padding-bottom-lg 1.5em
.padding-bottom-xl 3em
HTML
Problem Being Solved
Text needs to be aligned other than the locale default.
When to Use
Design dictates a non-default alignment.
When Not to Use
For fun
Note
These classes can be applied to any element or container element.
Margin
.zero-margin
.zero-left-margin
.zero-right-margin
.zero-bottom-margin
.zero-top-margin
.margin-xs .25em
.margin-sm .5em
.margin-md 1em
.margin-lg 1.5em
.margin-xl 3em
.margin-x-xs .25em
.margin-x-sm .5em
.margin-x-md 1em
.margin-x-lg 1.5em
.margin-x-xl 3em
.margin-y-xs .25em
.margin-y-sm .5em
.margin-y-md 1em
.margin-y-lg 1.5em
.margin-y-xl 3em
.margin-right-xs .25em
.margin-right-sm .5em
.margin-right-md 1em
.margin-right-lg 1.5em
.margin-right-xl 3em
.margin-bottom-xs .25em
.margin-bottom-sm .5em
.margin-bottom-md 1em
.margin-bottom-lg 1.5em
.margin-bottom-xl 3em
HTML
Problem Being Solved
Text needs to be aligned other than the locale default.
When to Use
Design dictates a non-default alignment.
When Not to Use
For fun
Note
These classes can be applied to any element or container element.